<template>
  <PageLayout>
    <!-- 表格布局 -->
    <TableContainer height="calc(100vh - 100px)">
      <TableLayout
        ref="tableLayout"
        :loader="getList"
        tableRowKey="id"
        @reset="reset"
      >
        <!-- 头部搜索 -->
        <template #header>
          <el-form ref="queryRef" :inline="true" :model="queryParams">
            <el-form-item label="科目类型:">
              <el-select
                v-model="queryParams.subjectTypes"
                style="width: 188px"
                placeholder="请选择科目类型"
                multiple
                clearable
                @change="handleQuery"
              >
                <el-option label="收入" value="1" />
                <el-option label="外包费用" value="2" />
                <el-option label="期间费用" value="3" />
              </el-select>
            </el-form-item>
            <el-form-item label="ERP编码名称:">
              <el-input
                v-model="queryParams.erpName"
                placeholder="请输入编码名称"
                clearable
                style="width: 160px"
                @input="handleQuery"
              />
            </el-form-item>
            <el-form-item label="OPRO编码名称:">
              <el-input
                v-model="queryParams.oproName"
                placeholder="请输入编码名称"
                clearable
                style="width: 160px"
                @input="handleQuery"
              />
            </el-form-item>
          </el-form>
        </template>

        <!-- 操作栏--左 -->
        <template #operator-left>
          <el-button type="primary" plain @click="handleAdd">新 增</el-button>
        </template>

        <!-- 操作栏-右 -->
        <template #operator-right>
          <tableOperatorSortCom
            :list="columnSort"
            isDrag
            @column-change="handleColumnChange"
            @drag-end="handleDragEnd"
          ></tableOperatorSortCom>
        </template>
        <!-- 列表 -->
        <template #columns>
          <TableColumn label="序号" type="order" width="55"></TableColumn>
          <template v-for="column in columnRef" :key="column.key">
            <TableColumn
              :label="column.label"
              :prop="column.key"
              :width="column.width"
              showOverflowTooltip
            >
              <template v-if="column.key == 'subjectType'" #default="{ row }">
                <span v-if="row.subjectType == 1">收入</span>
                <span v-else-if="row.subjectType == 2">外包费用</span>
                <span v-else-if="row.subjectType == 3">期间费用</span>
                <span v-else>--</span>
              </template>
            </TableColumn>
          </template>
          <TableColumn fixed="right" label="操作" width="160">
            <template #default="{ row }">
              <TableAction>
                <TableActionItem @click="handleUpdate(row)"
                  >编辑</TableActionItem
                >
                <TableActionItem type="danger" @click="handleDelete(row)"
                  >删除</TableActionItem
                >
              </TableAction>
            </template>
          </TableColumn>
        </template>
      </TableLayout>
    </TableContainer>

    <!-- 新增和编辑 -->
    <BiddingAddEdit
      ref="biddingAddEditRef"
      @refresh="getTableData"
    ></BiddingAddEdit>
  </PageLayout>
</template>

<script setup>
import { erpReflectList, erpReflectDelete } from "@/api/project/erpReflect";
import { reactive } from "vue";
import tableHeader from "./column";
import BiddingAddEdit from "./components/BiddingAddEdit";
import tableOperatorSortCom from "@/components/admin/table-operator-sort";

const { proxy } = getCurrentInstance();
const columnRef = ref(tableHeader);
const columnSort = ref([]);

onBeforeMount(() => {
  columnSort.value = JSON.parse(JSON.stringify(columnRef.value));
});

const queryParams = reactive({
  subjectTypes: null,
  oproName: null,
  erpName: null,
  page: 1,
  pageSize: 20,
});

const tableLayout = ref();

function handleQuery() {
  queryParams.page = 1;
  tableLayout.value.refresh();
}

function reset() {
  queryParams.subjectTypes = null;
  queryParams.erpName = null;
  queryParams.oproName = null;
  queryParams.page = 1;
  queryParams.pageSize = 20;
  tableLayout.value.refresh();
}
const handleDragEnd = (columns) => {
  tableHeader.value = columns;
};
async function getList(params) {
  const res = await erpReflectList({ ...queryParams, ...params });
  return { records: res.rows || [], total: res.total || 0 };
}

const handleColumnChange = (columns) => {
  columnRef.value = columns;
};

const biddingAddEditRef = ref(null);
function handleAdd() {
  biddingAddEditRef.value?.open();
}
function handleUpdate(row) {
  biddingAddEditRef.value?.open(row);
}
async function handleDelete(row) {
  await proxy.$modal.confirm("确定删除？");
  const result = await erpReflectDelete(row.id);
  if (result.code === 200) {
    proxy.$modal.msgSuccess("删除成功");
    tableLayout.value.refresh();
  } else {
    proxy.modal.msgError(result.msg);
  }
}

function getTableData() {
  handleQuery();
}
</script>
